Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Quill is a modern WYSIWYG editor built for compatibility and extensibility. It allows for rich text editing with a customizable toolbar and API. It's designed to be easy to use and integrate into web applications.
Basic Text Formatting
This code initializes a Quill editor with basic text formatting options such as bold, italic, underline, and strike-through, as well as blockquote and code block formatting.
var quill = new Quill('#editor', {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
Adding Custom Toolbar Buttons
This code demonstrates how to add a custom button to the Quill toolbar and define a custom event handler for it.
var quill = new Quill('#editor', {
modules: {
toolbar: {
container: '#toolbar',
handlers: {
'customButton': function() {
console.log('Custom button clicked!');
}
}
}
},
theme: 'snow'
});
// Assuming there is a button with class 'ql-customButton' in the toolbar
Handling Content Changes
This code sets up an event listener to log changes to the content of the Quill editor, providing the delta of the change.
var quill = new Quill('#editor', {
theme: 'snow'
});
quill.on('text-change', function(delta, oldDelta, source) {
console.log('Text was changed!', delta);
});
Setting and Getting Content
This code shows how to set the content of a Quill editor using a delta and how to retrieve the content as a delta.
var quill = new Quill('#editor', {
theme: 'snow'
});
// Set content
var delta = quill.clipboard.convert('<h1>Quill Rocks</h1>');
quill.setContents(delta);
// Get content
var content = quill.getContents();
console.log(content);
Draft.js is a framework for building rich text editors in React, providing a mutable model with a declarative API. It differs from Quill in that it's React-specific and offers a more complex API that allows for a higher degree of customization.
Slate is a completely customizable framework for building rich text editors. Unlike Quill, which uses a predefined set of modules and formats, Slate provides the building blocks to write completely custom editors from scratch, which can be both a powerful and complex endeavor.
CKEditor is a rich text editor with a wide range of plugins and features. It has been around for a long time and offers a different set of features compared to Quill, such as real-time collaboration and a larger set of out-of-the-box plugins.
TinyMCE is a web-based Javascript WYSIWYG editor control. It is similar to Quill in providing rich text editing capabilities but differs in its extensive plugin ecosystem and enterprise features like PowerPaste and Spell Checker Pro.
Documentation • Development • Contributing • Interactive Playground
Quill is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and actively maintained by Slab.
To get started, check out https://quilljs.com/ for documentation, guides, and live demos!
Instantiate a new Quill object with a css selector for the div that should become the editor.
<!-- Include Quill stylesheet -->
<link
href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
rel="stylesheet"
/>
<!-- Create the toolbar container -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br /></p>
</div>
<!-- Include the Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
const quill = new Quill("#editor", {
theme: "snow",
});
</script>
Take a look at the Quill website for more documentation, guides and live playground!
npm install quill
<!-- Main Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<!-- Theme included stylesheets -->
<link
href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.bubble.css"
rel="stylesheet"
/>
<!-- Core build with no theme, formatting, non-essential modules -->
<link
href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.js"></script>
Get help or stay up to date.
BSD 3-clause
FAQs
Your powerful, rich text editor
The npm package quill receives a total of 1,255,099 weekly downloads. As such, quill popularity was classified as popular.
We found that quill demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.